<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>场景列表</title>
    <!--CSS-->
    <link rel="stylesheet" type="text/css" media="all" href="/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/common.css"/>
    <!--JavaScript-->
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!--Custom JavaScript-->
    <!--<script type="text/javascript" src="/js/myJs.js"></script>-->
    <!--Custom CSS-->
    <link rel="stylesheet" type="text/css" media="all" href="/css/CaseManager.css"/>
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-sm12">

            <!--标题-->
            <div style="width: 80px; font-weight: bolder; font-size: large; margin-top: 20px; margin-left: auto; margin-right: auto">场景列表</div>
            <br/>
            <!--筛选区-->
            <div class="layui-col-xs4">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-bg-green" style="text-align: center;margin-right: 3px;">测试环境:</label>
                        <div class="layui-input-inline">
                            <select name="envSelect" id="envSelect">
                                <option value="sit" selected="selected">sit环境</option>
                                <option value="uat">uat环境</option>
                            </select>
                        </div>

                    </div>
                </form>
            </div>

            <div class="layui-col-xs4">

                <div class="demoTable">
                    名称搜索：
                    <div class="layui-inline">
                        <input class="layui-input" name="sceneName" id="sceneName" autocomplete="off" />
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
            </div>
            <div class="layui-col-xs4">
                模块搜索：
                <div class="layui-input-inline" style="width: 160px;">
                    <div class="layui-form">
                        <select name="module" id="module">
                            <option value="">请选择模块</option>
                        </select>
                    </div>
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
            <!--主表格-->
            <table class="layui-table" id="Scenetable" lay-filter="table"></table>
            <!--新建Case按钮-->
            <a href="/scene/addScene" style="margin-top:10px;" target="_blank" class="layui-btn">新建场景</a>

            <!--运行选定Case按钮-->
            <button class="layui-btn layui-btn-normal" style="margin-top:10px;" data-type="runscene">运行选定场景</button>
            <button class="layui-btn layui-btn-danger" style="margin-top:10px;" data-type="backData">数据还原</button>

            <a href="http://192.168.200.41:8888" style="margin-top:10px;" target="_blank" class="layui-btn layui-btn-warm">查看报告</a>
            <!--分模块运行Case下拉单-->



        </div>
    </div>
</div>


<script type="text/html" id="checkboxTpl">
    {{#  if(d.eStatus == "on"){ }}
    <input type="checkbox" name="eStatus" lay-skin="switch" checked="checked" disabled="disabled" />
    {{#  } else { }}
    <input type="checkbox" name="eStatus" lay-skin="switch" disabled="disabled" />
    {{#  } }}
</script>
<script>



    function loadPageWithBlank(url) {
        window.open(url);
    }
    $.get(
        "/api/module/getModuleForPaging", {
            pageNumber: 1,
            pageSize: 10,
        }, function (data) {
            var objectD = JSON.parse(data);
            $.each (objectD.rows, function (key, value) {
                var result = '<option value="' + value.name + '">' + value.name + '</option>';
                $('#module').append(result);
            })
            layui.use('form', function(){
                var form = layui.form;
                form.render();
            });
        }
    )
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#Scenetable'
            ,url:'/api/scene/SceneList'
            ,cellMinWidth: 80
            ,page: true
            ,id:'baseServerID'
            ,cols: [[
                {field: 'select', type:'checkbox', fixed: 'left'}
                // ,{field: 'sceneID', title:'id', align:'center', width: 50}
                ,{field:'name', title: '场景名称', align:'center', width: 200}
                ,{field:'sceneExplain', title: '场景介绍',  align:'center', width: 900}
                ,{field:'module', title: '系统',  align:'center', width: 100}
                ,{field:'count', title: '接口数量', align:'center', width: 150}
                ,{field:'leader', title: '建立人', align:'center', minWidth: 80}
                ,{field:'eStatus', title: '启用', align:'center', width: 80, templet: '#checkboxTpl', unresize: true}
                ,{fixed: 'right', width:240, align:'center', toolbar: '#EditScene'}
            ]],
            where: {
                name: '',
                module:'',
                env:'sit',
            },
            request: {
                //页码的参数名称，默认：page
                pageName: 'pageNumber',
                //每页数据量的参数名，默认：limit
                limitName: 'pageSize'
            },
            response: {
                //数据总数的字段名称，默认：count
                countName: 'total',
                //数据列表的字段名称，默认：data
                dataName: 'rows'
            }
        });
        var $ = layui.$, active = {
            /*表格重载*/
            reload: function(){
                var sceneName = $('#sceneName');
                var module = $('#module');
                var env = $('#envSelect')
                table.reload('baseServerID', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name: sceneName.val(),
                        module: module.val(),
                        env:env.val(),
                    }
                });
            },
            runscene: function(){
                var checkStatus = table.checkStatus('baseServerID'),
                    data = checkStatus.data;

                if (data.length > 0) {
                    // 获取ID
                    var parms = "";
                    var env = $('#envSelect')
                    data.forEach(function (e) {
                        parms = parms + e["sceneID"] + ",";
                    });
                    parms = parms.substring(0, parms.length - 1);
                    $.get(
                        "/api/scene/runScene", {
                            sceneIDs: parms,
                            env:env.val(),
                        }, function (data) {

                            if (data == "true") {
                                layer.alert("成功!")
                            } else {
                                layer.alert("失败了!")
                            }

                        }
                    )
                } else {
                    layer.alert("还没有选中的Case!");
                }
            },
            backData: function(){
                var checkStatus = table.checkStatus('baseServerID'),
                    data = checkStatus.data;

                if (data.length > 0) {
                    // 获取ID
                    var parms = "";
                    var env = $('#envSelect')
                    data.forEach(function (e) {
                        parms = parms + e["sceneID"] + ",";
                    });
                    parms = parms.substring(0, parms.length - 1);
                    $.get(
                        "/api/scene/cleanMysql", {
                            sceneIDs: parms,
                            env:env.val(),
                        }, function (data) {

                            if (data == "true") {
                                layer.alert("成功!")
                            } else {
                                layer.alert("失败了!")
                            }

                        }
                    )
                } else {
                    layer.alert("还没有选中的Case!");
                }
            },
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(table)', function(obj){
            var data = obj.data;

            if(obj.event === 'detail'){
                loadPageWithBlank("/scene/SceneDetail?sceneID=" + data.sceneID)
            }
            if (obj.event==='API'){
                loadPageWithBlank("/scene/APIList?sceneID=" + data.sceneID)
            }
            if (obj.event === 'CP'){
                $.ajax({
                    type:"get",
                    url:"/api/scene/sceneCopy?sceneID="+data.sceneID,
                    success: function(data) {
                        if (data === "true") {
                            layer.alert("成功")
                        }
                    }
                })
            }
        });
    });
</script>





<script type="text/html" id="EditScene">
    <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="API">查看接口</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="CP">一键复制</a>
</script>

</body>


</html>